<template>
    <el-main>
      <!--轮播图-->
      <el-carousel indicator-position="outside" height="500px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" >
        </el-carousel-item>
      </el-carousel>
      <!-- 电影栏1-->
      <el-tabs type="border-card" @tab-click="getindexonfilm()" >
        <el-tab-pane label="上映电影" >
          <el-row style="margin-top: 20px;margin-left: 120px"  >

            <el-col :span="4" v-for="(nowfilm,index) in NowFilm" :key="index"  :offset="1" >
              <el-card :body-style="{ padding: '0px' }" shadow="hover" class="el-card">
                <img :src="nowfilm.fnImg" class="image">
                <el-row style="padding: 0 10px 0 10px">
                   <el-col :span="2" :offset="1" style="margin-top: 10px">￥{{nowfilm.fnPrice}}</el-col>
                   <el-col :span="5" :offset="6"> <el-button type="primary" id="butt1" plain @click="addTick(nowfilm)"><span style="margin-left: -10px">立即购票</span></el-button></el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

<!--即将上映电影-->
        <el-tab-pane label="即将上映" @tab-click="getindexnextfilm()">
          <el-row style="margin-top: 20px;margin-left: 120px"  >
            <el-col :span="4" v-for="(nfilm, index) in nfilms" :key="index" :offset="1" >
              <el-card :body-style="{ padding: '0px' }" shadow="hover" class="el-card">
                <img :src="nfilm.nfImg" class="image">
                <el-row style="padding: 0 10px 0 10px">
                  <el-col :span="2" :offset="1" style="margin-top: 10px">￥{{nfilm.nfPrice}}</el-col>
                  <el-col :span="5" :offset="6"><el-button class="mybtn" type="danger" plain  @click="addshopcart(nfilm)">立即预约</el-button></el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>

        </el-tab-pane>

      </el-tabs>

    </el-main>
</template>

<script>
    export default {
        name: "IndexBody" ,
      data(){
          return{
            imgs: [
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576913205&di=56c1162b9b09a1a2ff642c16847bb590&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.bizhidaquan.com%2Fd%2Ffile%2Fdongman%2Frenwu%2F2015-01-16%2Fa0622b755e894dbe592fecb7b9d768eb.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576318753470&di=01dde07a22c23763afdd55b176ba8c51&imgtype=0&src=http%3A%2F%2Fmobimg.b-cdn.net%2Fpic%2Fv2%2Fgallery%2Fpreview%2Felovek-pauk_spider_man-kino-lyudi-45537.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576318793043&di=de4a0a8aa5163560b1ac14d430a4f24f&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F04%2Fc1%2F21655969_1370338749235.jpg'
            ] ,
            nfilms:[
              // {id:1,fName:"lang",fId:101,fPrice:101,fImg:'/static/logo.jpg'},
              // {id:2,fName:"lang",fId:101,fPrice:101,fImg:'/static/logo.jpg'}
            ],

            NowFilm:[
              {
                // fnId:1,
                // fnImg:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                // fnName:'澳门风云',
                // fnDirector:'王晶',
                // fnActor:['刘德华','张曼玉','张学友','郭富城'],
                // fnCountry:'中国/香港',
                // fnType:'喜剧/动作',
                // fnPrice:"50",
                // fnTime:150
                id:'',
                fnId:'',
                fnName:'',
                fnDirector:'',
                fnPrice:'',
                fnActor:'',
                fnIntro:'',
                fnScore:'',
                fnImg:'',
                fnSence:'',
                fnCountry:'',
                fnType:'',
                fnLanguage:'',
                fnPic:''
              }

            ],
          }
      } ,
      methods: {
        //获取首页即将上映电影信息
        getindexnextfilm(){
              var vm =this;
              this.axios({
                url:'http://localhost:80/api/nextfilm/getall',
                params:{nfIshow:1}
              }).then(function (res) {
                   if(res.data.success){
                       vm.nfilms=res.data.data;
                   }
              })
        } ,
        //获取首页上映电影信息
        getindexonfilm(){
          var vm =this;
          this.axios({
            url:'http://localhost:80/api/hotmovie/sIndexHot',
            params:{
                fnIshow:1
            }
          }).then(function (res) {
            if(res.data.success){
              vm.NowFilm=res.data.data;
            }
          })

        },
        //立即预约
        addshopcart(nfilm){
          this.$router.push({name:"ordermovie",params:{'nfilm':nfilm}})
          //this.$router.push('filmcart')
        } ,
        //立即购买
        addTick(onMovie){
            console.log(onMovie);
            if (sessionStorage.getItem("userinfo")!=null&&sessionStorage.getItem("userinfo")!="") {
                this.$router.push({name: "BuyTicket", params: {'onMovie': onMovie}})
            }else{
                this.$router.push("/login")
            }
        }
      } ,
      created() {
         this.getindexonfilm() ;
         this.getindexnextfilm()
      }
    }
</script>

<style scoped>
  .el-carousel-item  {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .image {
    width: 200px;
    display: block;
  }
  .el-card{
    margin-bottom: 30px;
  }
  .mybtn{
    /*padding-right: 20px;*/
    margin-left: -18px;

  }
  #butt1{
    width: 80px;
    height: 40px;
    margin-left: 30px;
  }
</style>
